<template>
  <div>
    <ul style="list-style-type: none;display: flex;width: 200px;justify-content: space-between">
      <li @click="switchAcd('tq')">天气</li>
      <li @click="switchAcd('lmzk')">路面</li>
      <li @click="switchAcd('lbqk')">路表</li>
      <li @click="switchAcd('zmtj')">照明</li>
    </ul>

    <tq v-show="active == 'tq'" :data="accidentByTqData" />
    <lbqk v-show="active == 'lmzk'" :data="accidentByLmzkData" />
    <lmzk v-show="active == 'lbqk'" :data="accidentByLbqkData" />
    <zmtj v-show="active == 'zmtj'" :data="accidentByZmtjData" />

  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

import tq from './tq.vue'
import lbqk from './lbqk.vue'
import lmzk from './lmzk.vue'
import zmtj from './zmtj.vue'

import { accidentByTq, accidentByLmzk, accidentByLbqk, accidentByZmtj } from "@/hooks/reports/useReports.js";

const active = ref('tq')

const { accidentByTqData } = accidentByTq('2024-01-30 00:00:00', '2024-12-30 00:00:00')
const { accidentByLmzkData } = accidentByLmzk('2024-01-30 00:00:00', '2024-12-30 00:00:00')
const { accidentByLbqkData } = accidentByLbqk('2024-01-30 00:00:00', '2024-12-30 00:00:00')
const { accidentByZmtjData } = accidentByZmtj('2024-01-30 00:00:00', '2024-12-30 00:00:00')

function switchAcd(value){
  active.value = value
}

</script>

<style scoped>

</style>
